<!-- 案例一：比特人的学习之旅 -->
<!-- 点击上一页、下一页的方式进行图片切换，本质就是操作图片地址列表下标 -->
<!-- 
  总结：比特人学习之旅
    需要使用v-show + ref响应式数据 + v-bind + v-on等指令
    是前期练习指令的较好案例
-->
<script setup>
  import {ref} from "vue"
  // 图片地址列表
  const imgList = [
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png'
  ]
  // 下标
  const index = ref(0)

</script>

<template>
  <div class="container">
    <div class="box">
      <button 
      @click="index--"
      v-show="index >= 1">上一页</button>
    </div>
    <div>
      <img :src="imgList[index]" width="350px">
    </div>
    <div class="box">
      <button 
      @click="index++"
      v-show="index < imgList.length - 1">下一页</button>
    </div>
  </div>
</template>

<style scoped>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box {
    width: 200px;
    display: flex;
    justify-content: center;
  }
</style>